<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>ECharts-山东地图</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script src="js/province/guangxi.js"></script>
    <style>#china-map {width:1000px; height: 1000px;margin: auto;}</style>
</head>
<body>

<div id="china-map"></div>

<script>
    function initEcharts(pName){
        var myChart1 = echarts.init(document.getElementById('china-map'));
        // 标注数据
        var mapData = [
            {'latitude':24.5080777697, 'longitude':109.4743093819 , 'name':'1', 'value':32358260, 'color':'#0394d9'},
            {'latitude':24.4683698180, 'longitude':109.3094042452 , 'name':'2', 'value':32358260, 'color':'#d94d02'},
            {'latitude':25.3051048188, 'longitude':109.3974095441 , 'name':'3', 'value':32358260, 'color':'#b42fd5'},
            {'latitude':22.9996102015, 'longitude':108.4031798089 , 'name':'4', 'value':32358260, 'color':'#0394d9'},
        ]
        var option = {
            title : {
                x:'center'
            },
            tooltip : {//提示框组件。
                trigger: 'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            },
            //地图配置
            geo: {
                type: 'map',
                roam: true,
                label: {
                    normal: {
                        show: true,
                        color:'#fff'
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#0394d9',
                        areaColor: '#161331',
                    },
                    emphasis: {
                        areaColor: '#389BB7',
                        borderWidth: 0
                    }
                },

            },
            series: [{
                type: 'effectScatter',      
                coordinateSystem: 'geo',
                // animation: true,
                rippleEffect: {
                   brushType: 'stroke'
               },
                symbolSize: function (val,params) {
                  return 20;
                },
                data: mapData.map(function (itemOpt) {
                        return {
                            name: itemOpt.name,
                            value: [
                                itemOpt.longitude,
                                itemOpt.latitude,
                                itemOpt.value
                            ],

                            label: {
                                emphasis: {
                                    position: 'right',
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: itemOpt.color
                                }
                            }
                        };
                })

            }]
        };
        myChart1.setOption(option);
        myChart1.on('click', function (params) {
            var dataIndex = params.dataIndex;
            console.log(params);
        });
    }
    initEcharts('广西');
</script>

</body>
</html>